<!-- eslint-disable max-len -->
<template>
  <!-- 柱状图和折线图混合的echarts组件 -->
  <div class="lineAndBarChar  h100">
    <loading-state :echartShowStatus="echartShowStatus" class="chartMain">
      <div ref="lineAndBarChartDom" v-show="echartShowStatus === 2" style="height:100%;width:100%"/>
    </loading-state>
  </div>
</template>
<script>
// 引入echarts加载状态组件
import i18n from '@/lang'
export default {
  components: {
  },
  props: {
    chartOption: {
      type: Object,
      default () {
        return {}
      }
    },
    loading: {
      type: Boolean,
      default: false
    }
  },
  computed: {
  },
  data () {
    const vm = this
    return {
      lineAndBarChart: null,
      echartShowStatus: 3,
      useTenThousand: false,
      options: {
        // 浮窗提示
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross',
            crossStyle: {
              color: '#999'
            }
          }
        },
        // 右上角工具
        toolbox: {
          feature: {
            dataView: { show: false, readOnly: false },
            magicType: { show: false, type: ['line', 'bar'] },
            restore: { show: false },
            saveAsImage: { show: false }
          }
        },
        xAxis: {
          type: 'category',
          // eslint-disable-next-line max-len
          data: [],
          axisPointer: {
            type: 'shadow'
          }
        },
        yAxis: [
          {
            type: 'value',
            name: this.$t('netflow'),
            min: 0,
            axisLabel: {
              formatter (value) {
                if (value === 0) {
                  return ''
                }
                return value + vm.flowUnits[vm.flowUnitsCurrent]
              }
            }
          },
          {
            type: 'value',
            name: this.$t('vehicle'),
            min: 0,
            splitLine: {
              show: false
            },
            // max: 9999,
            // interval: 1000,
            axisLabel: {
              formatter (value) {
                if (value === 0) {
                  return ''
                }
                if (vm.useTenThousand) {
                  return value + i18n.t('wt')
                }
                if ((String(value).indexOf('.')) > -1) {
                  return ''
                }
                return value + i18n.t('tai')
              }
            }
          }
        ],
        series: [
          {
            name: this.$t('xzll'),
            type: 'bar',
            tooltip: {
              valueFormatter (value) {
                return value + vm.flowUnits[vm.flowUnitsCurrent]
              }
            },
            data: []
          },
          {
            name: this.$t('scll'),
            type: 'bar',
            tooltip: {
              valueFormatter (value) {
                return value + vm.flowUnits[vm.flowUnitsCurrent]
              }
            },
            data: []
          },
          {
            name: this.$t('zll'),
            type: 'bar',
            tooltip: {
              valueFormatter (value) {
                return value + vm.flowUnits[vm.flowUnitsCurrent]
              }
            },
            data: []
          },
          {
            name: this.$t('vehicle'),
            type: 'line',
            yAxisIndex: 1,
            tooltip: {
              valueFormatter (value) {
                if (vm.useTenThousand) {
                  return value + i18n.t('wt')
                }
                return value + i18n.t('tai')
              }
            },
            data: []
          }
        ]
      },
      flowUnits: ['GB', 'TB', 'PB', 'EB', vm.$t('wEB')],
      flowUnitsCurrent: 0
    }
  },
  watch: {
    // 监听父组件获取数据的接口状态，并根据传递下来的数据进行判断
    loading (val) {
      if (val) {
        this.echartShowStatus = 1
      } else {
        if (this.chartOption && this.chartOption.xaxisData) {
          this.echartShowStatus = 2
          this.$nextTick(() => {
            this.matchDataToOption(val)
            this.initChartBox()
            this.setOption()
            this.bindEvent()
          })
        } else {
          this.echartShowStatus = 3
        }
      }
    }
  },
  methods: {
    matchDataToOption () {
      // mock 更改数据 注意备注
      // this.chartOption.yaxisData.totalVin[1] = '5889'
      // this.chartOption.yaxisData.downloadFlow[11] = '146'
      // this.chartOption.yaxisData.uploadFlow[11] = '100'
      // this.chartOption.yaxisData.totalFlow[11] = '246'
      // x轴数值赋予
      this.options.xAxis.data = this.chartOption.xaxisData
      // 判断流量数值并动态计算更改单位
      let maxTotal = 0
      this.chartOption.yaxisData.totalFlow.forEach((item) => {
        if ((item * 1) > maxTotal) {
          maxTotal = item * 1
        }
      })
      if (maxTotal > 1000) {
        this.flowUnitsCurrent = 1
        if (maxTotal > 1000000) {
          this.flowUnitsCurrent = 2
          if (maxTotal > 1000000000) {
            this.flowUnitsCurrent = 3
            if (maxTotal > 1000000000000) {
              this.flowUnitsCurrent = 4
            }
          }
        }
      } else {
        this.flowUnitsCurrent = 0
      }
      console.log(this.flowUnitsCurrent, 'this.flowUnitsCurrent')
      this.options.series[0].data = this.chartOption.yaxisData.downloadFlow.map((item) => {
        return Math.ceil((item / (1024 ** this.flowUnitsCurrent)) * 100) / 100
      })
      this.options.series[1].data = this.chartOption.yaxisData.uploadFlow.map((item) => {
        return Math.ceil((item / (1024 ** this.flowUnitsCurrent)) * 100) / 100
      })
      this.options.series[2].data = this.chartOption.yaxisData.totalFlow.map((item) => {
        return Math.ceil((item / (1024 ** this.flowUnitsCurrent)) * 100) / 100
      })
      // 判断车辆用台还是用万台
      let maxNum = 0
      this.chartOption.yaxisData.totalVin.forEach((item) => {
        if ((item * 1) > maxNum) {
          maxNum = item * 1
        }
      })

      if (maxNum > 9999) {
        this.useTenThousand = true
      } else {
        this.useTenThousand = false
      }
      if (this.useTenThousand) {
        this.options.yAxis[1].max = 10
        this.options.yAxis[1].interval = 1
        const conutByTenThousandVehicle = this.chartOption.yaxisData.totalVin.map((item) => {
          return Math.ceil(((item * 1) / 10000) * 100) / 100
        })
        this.options.series[3].data = conutByTenThousandVehicle
      } else {
        this.options.series[3].data = this.chartOption.yaxisData.totalVin
      }
    },
    initChartBox () {
      if (this.lineAndBarChart) {
        return
      }
      this.lineAndBarChart = this.$echarts.init(this.$refs.lineAndBarChartDom)
    },
    setOption () {
      if (!this.lineAndBarChart) {
        return
      }
      this.resizeChart()
      this.lineAndBarChart.setOption(this.options, true)
    },
    bindEvent () {
      window.addEventListener('resize', this.resizeChart)
    },
    resizeChart () {
      this.lineAndBarChart && this.lineAndBarChart.resize()
    }
  },
  beforeDestroy () {
    const vm = this
    if (vm.chart) {
      window.removeEventListener('resize', vm.resizeChart)
    }
  }
}
</script>
<style lang="less" scoped>
.lineAndBarChar{
  display: flex;
  width: 100%;
  flex-direction: column;
  .chartTitle {
    flex: none;
  }
  .chartMain {
    flex: 1 0 0;
  }
}
</style>
